
let box = document.querySelector(".box");
let arrowR = document.querySelector(".arrow_right");
let arrowL = document.querySelector(".arrow_left");
let imgList = document.querySelectorAll(".img_box > ul > li");
let barList = document.querySelectorAll(".bar_box > ul > li");
let index = 0; // 初始化变量
let lastIndex = 0; // 保存上一次操作的初始化变量
let timer; // 自动轮播定时器

//左箭头
arrowL.addEventListener("click",arrowLFn)
// 右箭头
arrowR.addEventListener("click", arrowRFn);
//封装函数
function arrowLFn() {
    // 到达第一张，再次点击则跳回最后一张
    (--index < 0) && (index = imgList.length - 1);
    fn(lastIndex, index);
}
function arrowRFn() {
    // 到达最后一张，再次点击则跳回第一张
    (++index == imgList.length) && (index = 0);
    fn(lastIndex, index);
}
function fn(last,idx){
    //图片切换类名
    imgList[idx].classList.add("imgActive");
    imgList[last].classList.remove("imgActive");
    // 小圆点切换类名
    barList[idx].classList.add("barActive");
    barList[last].classList.remove("barActive");

    lastIndex = idx;
}

// 小圆点点击事件
barList.forEach(function(el,idx){
    el.addEventListener("click",function(){
        fn(lastIndex,idx);
    })
});

// 自动轮播
timeFn();
function timeFn() {
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(function () {
        arrowRFn()
    }, 1000);
}

// 鼠标移入box区域，停止定时器
box.addEventListener("mouseenter", function () {
    clearInterval(timer);
});
// 鼠标移出box区域，开始定时器
box.addEventListener("mouseleave", function () {
    setTimeout(timeFn, 2000)
});

// 检测页面是否切换，切换就停止定时器
window.addEventListener("visibilitychange", function () {
    if (document.hidden) {
        clearInterval(timer);
    } else {
        timeFn();
    }
});